<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,tr,td,input,textarea{
        margin:0;
        padding:0;
        list-style:none;
        }
        #bigbox{
            width: 750px;
            height: 320px;
            margin: 100px auto;
            border: 1px solid #ccc;
            padding:10px;
        }
        #box{
            width: 750px;
            height: 320px;
            position: relative;
            overflow: hidden;
        }
        #ul{
            width: 5000px;
            height: 300px;
            position: absolute;
        }
        #ul li{
            width: 750px;
            height: 320px;
            float: left;
          }
        #ol {
            position: absolute;
            right:14px;
            bottom:14px;
        }
        #ol li{
            width: 20px;
            height: 20px;
            border-radius:50%;
            float: left;
            background-color: #ccc;
            margin-left:4px;
            cursor:pointer;
        }
        .current{
            background-color: red !important;
        }
    </style>
    <script src="js/base.js"></script>
</head>
<body>
<div id="bigbox">
    <div id="box">
            <ul id="ul">
                <li><img src="images/pic01.jpg" alt=""></li>
                <li><img src="images/pic02.jpg" alt=""></li>
                <li><img src="images/pic03.jpg" alt=""></li>
                <li><img src="images/pic04.jpg" alt=""></li>
                <li><img src="images/pic05.jpg" alt=""></li>
            </ul>
        <ol id="ol">
        </ol>
    </div>
</div>
<script>
    window.onload = function(){
        var bigBox =document.getElementById('bigbox');
        var ul = document.getElementById('ul');
        var lis = ul.getElementsByTagName('li');
        var ol = document.getElementById('ol');
        //在最后一张图片后面复制第一张图片反正后面
        ul.appendChild(lis[0].cloneNode(true));
        //根据图片的数量添加小圆点的数量
        for(var i=0;i<ul.children.length-1;i++){
            var li = document.createElement('li');
            ol.appendChild(li);
            //给第一个小圆点设置选中样式
            ol.children[0].className = 'current';
        }
        //遍历所有小圆点添加onmouseover事件
        for(var i =0;i<ol.children.length;i++){
            //只要是排他思想都可以使用小闭包()()，第一个()套匿名函数，传入形参，第二个()传入实参
            (function (index) {
                ol.children[index].index = i;
                ol.children[index].onmouseover = function () {
                    for(var j=0;j<ol.children.length;j++){
                        ol.children[j].className = '';
                    }
                    this.className = 'current';
                    imgNum = icoNum = index;
                    //让图片走动起来
                    // ul.style.left = - this.index*750+'px';这个不是匀速动画，直接跳
                    constant(ul,-index*750,10)
                }
            })(i)
        }

        //设置图片自动轮播
        var imgNum = 0;//设置图片运动的初始值
        var icoNum = 0;//设置小圆点运动的初始值
        var timer = setInterval(autoPlay,2000);
        bigBox.onmouseover = function () {
            clearInterval(timer);
        };
        bigBox.onmouseout = function () {
            timer = setInterval(autoPlay,2000);
        };
        //运动逻辑
        function autoPlay(){
            imgNum++;
            icoNum++;
            if(imgNum>ul.children.length-1){
                imgNum = 1;//当所有图片走完的时候应该调回第二张，因为最后一张是复制的第一张图片，所以下次就直接从第二张开始
                //让ul快速直接回到
                ul.style.left = 0 +'px';
            }
            //走起来
            //ul.style.left = - imgNum*750+'px';
            constant(ul,- imgNum*750,10);

            //设置小圆点和图片一起动，先清空，在赋值
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].className = '';
            }
            if(icoNum>ol.children.length-1){//要减一，因为icoNum2的值是做下标的，要比长度少一。
                icoNum=0;
            }
//            console.log(icoNum);
            ol.children[icoNum].className = 'current';
        }
    };


        /***
         * 思路：加匀速运动过渡效果的无缝轮播：一个是图片走动起来的时候添加匀速运动效果，另一个是复制第一张图片放在最后面，当轮播到最后一张的时候看起来就到了第一张，这时候快速的让整个ul重新回到第二张，这样用户看起来就是衔接起来的图片
         * 1.首先先复制ul里面的第一张图片放在最后面ul.appendChlid(ul.Child[0].cloneNode(true))
         * 2.动态添加小圆点，for循环根据ul.length-1的长度添加，因为克隆了一张所以要-1；
         * 3.给动态添加的第一个小圆点赋予初始值‘current’,让它背景变色
         * 4.遍历所有的ol.child.length,取出每个ol里面的小圆点li，顺便给每个li设置一个索引值 li.index = i;
         * 5.给li添加鼠标的onmouseover事件，此时用循环遍历每个ol.child.length,先清空所有ol.child[j]的ClassName，再给当前over的图片添加className = 'current',让鼠标在小圆点移动小圆点的背景色变
         * 6.让图片和小圆点绑定，用到上面li中设置的索引值li.index，让图片动起来（即让整个ul没次走图片的宽度，css里面已经设置好）ul.style.left = - this.index*图片的宽度+‘px’;在这里可以给图片移动绑定封装好的匀速动画
         * 7.设置setInterval动画让图片自动动起来，初始化两个值，图片运动的值imgNum还有小圆点跟着图片运动的值icoNum,还有定时器的初始值 timer = null
         * 8.设置装一个运动逻辑的function autuPlay(){}
         * 8.1 让imgNum++和icoNum++ 先让图片自动动起来  ul.style.left = - imgNum*图片的宽度+‘px’; 让imgNum+1，就先当于img的下标值，这时候记得判断，让imgNum>ul.length-1的时候，让imgNum=1，回到第二张，因为最后一张本身就是复制第一张的，相当于了第一张，所以就从第二张开始，这时候判断里面让图片马上回零ul.style.left = 0
         * 8.2开始处理小圆点跟着图片改变自身的current值：同样先清空所有li身上的current
         * 这时候通过和图片索引imgNum相同值的小圆点索引icoNum赋取到每给ol.chlid[icoNum]然后设置className = 'current';
         * 8.3在判断每个小圆点何时往返：当小圆点的icoNum等于最后一个时候，就返回第一个，即icoNum > ol.length-1;这里也要-1，因为也是赋给下标(长度1-5，下标0-4)，此时让icoNum = 0;
         *9.然后调用
         * 9.1 一开始就要调用timer = setInerval(autuPlay(),100);
         * 9.2 鼠标移入的时候清空定时器
         * 9.3 鼠标移除的时候开启定时器
         * 9.4 让小圆点hover的时候的图片位置是最高值 ，即设置imgNum = icoNum = this.index;
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         *
         */

</script>
</body>
</html>